---
layout: base
---

<main class="clear">

  {% assign page__url = page.url | replace:'index.html','' %}

  <nav class="toc g-wide--1 g-medium--1">
    {% if page.toc != "" and page.toc != nil %}
      <div class="pagetoc">
        <p class="toc__title">
          <a href="{{ site.baseurl }}{{ page__url }}">{{ page.title }}</a>
        </p>
        {{ page.toc }}
      </div>
    {% endif %}
  </nav>

  <header class="page-header container">
    <h2 class="xxlarge text-divider">{{ page.title }}</h2>
    <p class="page-header__excerpt g-wide--push-1 g-wide--pull-1">
      {% if page.description %}
        {{ page.description }}
        <br>
      {% endif %}
      <strong>{{ site.release }}</strong>
    </p>
  </header>

  <section class="download-promo">
    <div class="container">
      <ul class="list-centered list--reset clear">
        <li>
          <a class="button--primary" href="https://github.com/youtube/spfjs/releases/download/v{{ site.version }}/spfjs-{{ site.version }}-dist.zip">
            <i class="icon mega-octicon octicon-cloud-download"></i>
            <span>Download SPF</span>
          </a>
        </li>
        <li>
          <a class="button--secondary" href="https://github.com/youtube/spfjs/archive/v{{ site.version }}.zip">
            <i class="icon mega-octicon octicon-code"></i>
            <span>Download source</span>
          </a>
        </li>
        <li>
          <a class="button--secondary" href="https://github.com/youtube/spfjs">
           <i class="icon mega-octicon octicon-mark-github"></i>
           <span>View on GitHub</span>
          </a>
        </li>
      </ul>
    </div>
  </section>

  <article>
    <div class="container">
      {{ content}}
    </div>
  </article>

</main>
